<template>
	<view class="body">
		<view class="titletext">
			<view class="image1" @click="goToIndex">
				<image class="img1" src="../../static/返回.png"></image>
			</view>
			<view class="jingcaizuqiu">竞彩足球</view>
			<view class="bangzhu">帮助</view>
		</view>

		<view class="tabbox">
			<view class="tab">
				<scroll-view class="group" scroll-x>
					<view class="xuanxiang" :class="{ 'active': currentTab === '混合投注' }" @click="switchTab('混合投注')">
						混合投注
					</view>
					<view class="xuanxiang" :class="{ 'active': currentTab === '胜平负/让球' }" @click="switchTab('胜平负/让球')">
						胜平负/让球
					</view>
					<view class="xuanxiang" :class="{ 'active': currentTab === '全场比分' }" @click="switchTab('全场比分')">
						全场比分
					</view>
					<view class="xuanxiang" :class="{ 'active': currentTab === '总进球' }" @click="switchTab('总进球')">
						总进球
					</view>
					<view class="xuanxiang" :class="{ 'active': currentTab === '全半场' }" @click="switchTab('全半场')">
						全半场
					</view>
					<view class="xuanxiang" :class="{ 'active': currentTab === '单场决胜' }" @click="switchTab('单场决胜')">
						单场决胜
					</view>
				</scroll-view>
			</view>
			<view class="image2">
				<image class="img2" @click="showTanchuang" src="../../static/四宫格.png"></image>
			</view>
		</view>

		<view class="xialabox" v-if="currentTab === '混合投注'">
			<!-- 混合投注的内容 -->
			<view class="xialaneirong">
				<view class="riqitext">2024-09-13 周五 共9场</view>
				<view class="image3">
					<image class="img3" :class="{ 'rotated': expanded }" @click="toggleExpand"
						src="../../static/展开1.png"></image>
				</view>
			</view>

			<!-- 比赛内容 -->
			<view class="bisai" v-show="expanded">
				<view class="nrtextbox">
					<view class="nrbox1">
						<view class="text1">传崎前锋</view>
						<view class="text2">VS</view>
						<view class="text3">鸟栖沙岩</view>
					</view>
					
					<view class="nrbox2">
						<view class="nrleft">
							<view class="text4">周五001</view>
							<view class="text5">日职</view>
							<view class="text6">17:58截止</view>
							<view class="text7">分析</view>
						</view>

						<!-- 右半表格 -->
						<view class="nrright">
							<view class="texttable">
								<view class="lie1">
									<view class="textlie11">0</view>
									<view class="textlie12">-1</view>
								</view>
								<view class="lie2">
									<view class="textlie21" :class="{ 'selected': selections.textlie21 }"
										@click="selectOption('textlie21')">
										<view class="textlie211">胜</view>
										<view class="textlie212">1.90</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
									<view class="textlie22" :class="{ 'selected': selections.textlie22 }"
										@click="selectOption('textlie22')">
										<view class="textlie221">胜</view>
										<view class="textlie222">3.70</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
								</view>

								<view class="lie2">
									<view class="textlie31" :class="{ 'selected': selections.textlie31 }"
										@click="selectOption('textlie31')">
										<view class="textlie311">平</view>
										<view class="textlie312">3.54</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
									<view class="textlie32" :class="{ 'selected': selections.textlie32 }"
										@click="selectOption('textlie32')">
										<view class="textlie321">平</view>
										<view class="textlie322">3.75</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
								</view>

								<view class="lie2">
									<view class="textlie41" :class="{ 'selected': selections.textlie41 }"
										@click="selectOption('textlie41')">
										<view class="textlie411">负</view>
										<view class="textlie412">3.12</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
									<view class="textlie42" :class="{ 'selected': selections.textlie42 }"
										@click="selectOption('textlie42')">
										<view class="textlie421">负</view>
										<view class="textlie422">1.69</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
								</view>

								<view class="lie3" :class="{ 'selectedCountPositive': selectedCount > 0 }">
									<view>
										<view class="textlie5">
											{{ selectionText1 }}
										</view>
										<view class="textlie6">
											{{ selectionText2 }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="nrtextbox">
					<view class="nrbox1">
						<view class="text1">传崎前锋</view>
						<view class="text2">VS</view>
						<view class="text3">鸟栖沙岩</view>
					</view>
					
					<view class="nrbox2">
						<view class="nrleft">
							<view class="text4">周五001</view>
							<view class="text5">日职</view>
							<view class="text6">17:58截止</view>
							<view class="text7">分析</view>
						</view>
				
						<!-- 右半表格 -->
						<view class="nrright">
							<view class="texttable">
								<view class="lie1">
									<view class="textlie11">0</view>
									<view class="textlie12">-1</view>
								</view>
								<view class="lie2">
									<view class="textlie21" :class="{ 'selected': selections.textlie21 }"
										@click="selectOption('textlie21')">
										<view class="textlie211">胜</view>
										<view class="textlie212">1.90</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
									<view class="textlie22" :class="{ 'selected': selections.textlie22 }"
										@click="selectOption('textlie22')">
										<view class="textlie221">胜</view>
										<view class="textlie222">3.70</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
								</view>
				
								<view class="lie2">
									<view class="textlie31" :class="{ 'selected': selections.textlie31 }"
										@click="selectOption('textlie31')">
										<view class="textlie311">平</view>
										<view class="textlie312">3.54</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
									<view class="textlie32" :class="{ 'selected': selections.textlie32 }"
										@click="selectOption('textlie32')">
										<view class="textlie321">平</view>
										<view class="textlie322">3.75</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
								</view>
				
								<view class="lie2">
									<view class="textlie41" :class="{ 'selected': selections.textlie41 }"
										@click="selectOption('textlie41')">
										<view class="textlie411">负</view>
										<view class="textlie412">3.12</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
									<view class="textlie42" :class="{ 'selected': selections.textlie42 }"
										@click="selectOption('textlie42')">
										<view class="textlie421">负</view>
										<view class="textlie422">1.69</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
								</view>
				
								<view class="lie3" :class="{ 'selectedCountPositive': selectedCount > 0 }">
									<view>
										<view class="textlie5">
											{{ selectionText1 }}
										</view>
										<view class="textlie6">
											{{ selectionText2 }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="nrtextbox">
					<view class="nrbox1">
						<view class="text1">传奇后峰</view>
						<view class="text2">VS</view>
						<view class="text3">鸟栖石岩</view>
					</view>
					
					<view class="nrbox2">
						<view class="nrleft">
							<view class="text4">周五001</view>
							<view class="text5">日职</view>
							<view class="text6">17:18截止</view>
							<view class="text7">分析</view>
						</view>
				
						<!-- 右半表格 -->
						<view class="nrright">
							<view class="texttable">
								<view class="lie1">
									<view class="textlie11">0</view>
									<view class="textlie12">-1</view>
								</view>
								<view class="lie2">
									<view class="textlie21" :class="{ 'selected': selections.textlie21 }"
										@click="selectOption('textlie21')">
										<view class="textlie211">胜</view>
										<view class="textlie212">1.90</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
									<view class="textlie22" :class="{ 'selected': selections.textlie22 }"
										@click="selectOption('textlie22')">
										<view class="textlie221">胜</view>
										<view class="textlie222">3.70</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
								</view>
				
								<view class="lie2">
									<view class="textlie31" :class="{ 'selected': selections.textlie31 }"
										@click="selectOption('textlie31')">
										<view class="textlie311">平</view>
										<view class="textlie312">3.54</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
									<view class="textlie32" :class="{ 'selected': selections.textlie32 }"
										@click="selectOption('textlie32')">
										<view class="textlie321">平</view>
										<view class="textlie322">3.75</view>
										<view>
											<image src="../../static/llvsexiangxiajiantou.png"></image>
										</view>
									</view>
								</view>
				
								<view class="lie2">
									<view class="textlie41" :class="{ 'selected': selections.textlie41 }"
										@click="selectOption('textlie41')">
										<view class="textlie411">负</view>
										<view class="textlie412">3.12</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
									<view class="textlie42" :class="{ 'selected': selections.textlie42 }"
										@click="selectOption('textlie42')">
										<view class="textlie421">负</view>
										<view class="textlie422">1.69</view>
										<view>
											<image src="../../static/hongsexiangshangjiantou.png"></image>
										</view>
									</view>
								</view>
				
								<view class="lie3" :class="{ 'selectedCountPositive': selectedCount > 0 }">
									<view>
										<view class="textlie5">
											{{ selectionText1 }}
										</view>
										<view class="textlie6">
											{{ selectionText2 }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="xialabox" v-else-if="currentTab === '胜平负/让球'">
			<!-- 胜平负/让球的内容 -->
			<view class="xialaneirong">
				<view class="riqitext">2024-09-13 周五 共9场</view>
				<view class="image3">
					<image class="img3" :class="{ 'rotated': expanded }" @click="toggleExpand"
						src="../../static/展开.png"></image>
				</view>
			</view>
		</view>

		<view class="dibutabbar">
			<view class="dibuleft">
				<view class="lajitong">
					<image class="imgljt" src="../../static/ljt.png"></image>
				</view>
				<view class="dibutextbox">
					<view class="dibutext1">已关注{{selectedCount}}场</view>
					<view class="dibutext2">至少选一场单关或任意2场比赛</view>
				</view>
			</view>
			<view class="diburight">
				<view class="textxyb">下一步</view>
			</view>
		</view>




		<view class="tanchuang" v-if="isVisible">
			<view class="tanchuangnr">
				<view class="tanchuang_nrbox">
					<view class="tanchuang_checkbox">
						<view class="tanchuang_check">全选</view>
						<view class="tanchuang_check">反选</view>
						<view class="tanchuang_check">五大联赛</view>
					</view>
				</view>
				<view class="tanchaung_textbox">
					<view class="tanchuang_text">瑞超1</view>
					<view class="tanchuang_text">挪超1</view>
					<view class="tanchuang_text">意甲1</view>
					<view class="tanchuang_text">西甲1</view>
					<view class="tanchuang_text">葡超1</view>
				</view>

				<view class="tanchuang_peilvtext">胜平负最低赔率</view>
				<view class="tanchuang_peilvbox">
					<view class="tanchuang_peilv">赔率{{ '&lt;1.50' }}</view>
					<view class="tanchuang_peilv">赔率1.50-2.00</view>
					<view class="tanchuang_peilv">赔率>2.00</view>
				</view>

				<view class="tanchuang_qitabox">
					<view class="tanchuang_qita_checkbox"></view>
					<view class="tanchuang_qitabox_text">只显示胜平负单关</view>
					<view class="tanchuang_qitabox_button">清空</view>
				</view>

				<view class="tanchuang_button_box">
					<view class="quxiaobox" @click="closeTanchuang">取消</view>
					<view class="quedingbox">确定</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: '混合投注', // 默认选中第一个标签
				expanded: true, // 控制展开和收起的状态
				selections: {
					textlie21: false,
					textlie22: false,
					textlie31: false,
					textlie32: false,
					textlie41: false,
					textlie42: false,
				},
				selectedCount: 0,
				isVisible: false, // 控制弹窗显示和隐藏的变量
			};
		},
		computed: {
			selectionText1() {
				return this.selectedCount > 0 ? `已选` : '更多';
			},
			selectionText2() {
				return this.selectedCount > 0 ? `${this.selectedCount}项` : '玩法';
			},
		},
		methods: {
			// 跳转到首页的方法
			goToIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			},
			// 切换标签的方法
			switchTab(tab) {
				console.log('xxxx')
				this.currentTab = tab;
			},
			// 选择选项的方法
			selectOption(option) {
				this.$set(this.selections, option, !this.selections[option]);
				this.updateSelectedCount();
			},
			// 更新选中数量的方法
			updateSelectedCount() {
				this.selectedCount = Object.values(this.selections).filter((selected) => selected).length;
			},
			// 控制展开和收起的方法
			toggleExpand() {
				this.expanded = !this.expanded;
			},
			showTanchuang() {
				this.isVisible = true; // 点击图片时，显示弹窗
			},
			closeTanchuang() {
				this.isVisible = false; // 点击取消时，隐藏弹窗
			}
		},
	}
</script>

<style>
	page{
		background: #f5f5f5;
	}
	.selectedCountPositive {
		background-color: #e23234;
		color: white;
	}

	.selected .textlie212,
	.selected .textlie312,
	.selected .textlie412,
	.selected .textlie222,
	.selected .textlie322,
	.selected .textlie422 {
		color: white;
	}

	.selected {
		background-color: #e23234;
		color: white;
	}

	/* 添加旋转样式 */
	.rotated {
		transform: rotate(180deg);
	}

	
	.titletext {
		background-color: #e23234;
		display: flex;
		padding: 3%;
		border-radius: 5px 5px 0 0;
	}

	.image1 {
		width: 20px;
		margin: auto;
	}

	.img1 {
		width: 100%;
		height: 20px;
	}

	.jingcaizuqiu {
		width: 80%;
		text-align: center;
		color: white;
		font-size: 40rpx;
		color: rgb(255, 255, 255);
		font-weight: 500;
	}

	.bangzhu {
		color: white;
		font-size: 35rpx;
	}


	/* tab栏 */
	.tabbox {
		background-color: #fbe5e5;
		display: flex;
		padding: 2% 2% 2% 0%;
	}

	.tab {
	    width: 90%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.group {
		width: 100%;
		white-space: nowrap;
	}

	.xuanxiang {
		/* 	width: 22%;
		font-size: 14px;
		display: inline-block;
		text-align: center; */
		font-size: 14px;
		display: inline-block;
		text-align: center;
		padding: 0 5%;
	}

	.xuanxiang:hover {
		color: red;
	}

	.active {
		color: #e23234;
		/* 选中标签的颜色 */
	}

	.image2 {
		width: 5%;
		margin: auto;
	}

	.img2 {
		width: 40rpx;
		height: 40rpx;
	}

	.xialaneirong {
		background-color: #f5f5f5;
		display: flex;
	}

	.riqitext {
		width: 70%;
		text-align: right;
		line-height: 45px;
		font-size: 25rpx;
	}

	.image3 {
		margin: auto 0;
	}

	.img3 {
		width: 40rpx;
		height: 40rpx;
	}
	
	.bisai{
		background: white;
		height: 80vh;
		overflow-y: auto;
	}
	.nrtextbox {
		width: 96%;
		padding: 2%;
		/* background: white; */
	}

	.nrbox1 {
		width: 100%;
		display: flex;
		padding-bottom: 4%;
	}

	.text1 {
		padding-left: 20%;
		font-size: 15px;
	}

	.text2 {
		width: 45%;
		text-align: center;
		font-size: 15px;
		color: rgb(153, 153, 153);
	}

	.text3 {
		font-size: 15px;
	}

	.nrbox2 {
		width: 100%;
		display: flex;
	}

	.nrleft {
		/* width: 15%;
		font-size: 13px; */
		width: 20%;
		font-size: 13px;
		margin-top: -10px;
	}

	.nrleft view {
		margin: 5% auto;
		/* 上下间距 */
	}

	.text4 {
		/* width:15% ; */
		font-size: 13px;
		text-align: center;
	}

	.text5 {
		width: 80%;
		color: rgb(255, 255, 255);
		background: rgb(24, 181, 102);
		text-align: center;
		margin: 0 auto;
	}

	.text6 {
		font-size: 13px;
		text-align: center;
	}

	.text7 {
		text-align: center;
		color: red;
		font-size: 13px;
	}

	.nrright {
		width: 80%;
	}

	.lie1 {
		width: 8%;
		/* height: 72rpx; */
	}

	.textlie11 {
		/* width: 100%; */
		text-align: center;
	}

	.textlie12 {
		background: #ff7340;
		color: #fff;
	}

	.lie2 {
		width: 26.66%;
		height: 72rpx;
	}

	.lie3 {
		width: 17.32%;
		border: 1px solid #ccc;
		/* 	display: flex; */
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		display: flex;
	}

	image {
		width: 5px;
		height: 10px;
		margin-left: 5px;
	}

	.texttable {
		display: flex;
	}

	.textlie11,
	.textlie12,
	.textlie21,
	.textlie22,
	.textlie31,
	.textlie32,
	.textlie41,
	.textlie42 {
		display: flex;
		/* border: 1px solid #ccc; */
		height: 72rpx;
		/* line-height: 60rpx; */
		/* padding-left: 16rpx; */
		align-items: center;
		justify-content: center;
		/* border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc; */
		border: 1px solid #ccc;
		box-sizing: border-box;

		/* color: #999; */
	}


	.textlie5 {
		text-align: center;
		/* padding: 0 7px; */
		font-size: 15px;
	/* 	padding-top: 17px; */
	}

	.textlie6 {
		text-align: center;
		/* width: 70rpx; */
		/* padding: 0 7px; */
		font-size: 15px;
	}


	.textlie211,
	.textlie311,
	.textlie411,
	.textlie221,
	.textlie321,
	.textlie421 {
		font-size: 15px;
		/* color: black; */
	}

	.textlie212,
	.textlie312,
	.textlie412,
	.textlie222,
	.textlie322,
	.textlie422 {
		font-size: 13px;
		color: #999;
		margin-left: 4px;
	}

	/* 底部 */
	.dibutabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		background-color: #fbe5e5;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
	}

	.dibuleft {
		width: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fbe5e5;
		padding: 2%;
	}

	.lajitong {
		margin-right: 10%;
	}

	.imgljt {
		width: 60rpx;
		height: 60rpx;
	}

	.dibutextbox {
		text-align: center;
	}

	.dibutext1 {
		font-size: 12.5px;
	}

	.dibutext2 {
		color: rgb(248, 150, 23);
		font-size: 12.5px;
	}

	.diburight {
		width: 26%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e23234;
		color: white;
		padding: 2%;
	}



	/* 弹窗 */

	.tanchuang {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
	}

	.tanchuangnr {
		background-color: white;
		padding: 2%;
		border-radius: 10px;
		width: 90%;
	}

	.tanchuang_checkbox {
		display: flex;
		margin-bottom: 4px;
		margin-top: 25px;
		margin-left: -2%;
	}

	.tanchuang_check {
		color: #999;
		width: 30%;
		text-align: center;
		padding: 7px 0;
		border: 1px solid #999;
		border-radius: 9px;
		margin-left: 2%;
		font-size: 15px;
	}

	/* 五个文本部分 */
	.tanchaung_textbox {
		padding: 2%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		margin-left: -6%;
	}

	.tanchuang_text {
		font-size: 12px;
		color: #999;
		width: 26%;
		text-align: center;
		border: 1px solid #999;
		padding: 5px 0;
		margin-left: 6%;
		margin-bottom: 10px;
	}

	/* 	.tanchuang_text {
		font-size: 9px;
		color: #999;
		width: 28%;
		text-align: center;
		border: 1px solid #999;
		padding: 1%;
		margin: 1%;
	} */
	.tanchuang_peilvtext {
		font-size: 14px;
	}

	.tanchuang_peilvbox {
		display: flex;
		flex-flow: row nowrap;
	}

	.tanchuang_peilv {
		width: 31.3%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 13px;
		color: #999;
		margin: 5px 2% 5px 0;
		position: relative;
		border: 1px solid #999;
	}

	.tanchuang_qitabox {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.tanchuang_qita_checkbox {
		width: 14px;
		height: 14px;
		border: 1px solid #999;
		border-radius: 23%;
		margin-right: 2px;
		margin: auto;
	}

	.tanchuang_qitabox_text {
		flex: 1;
		margin-left: 5px;
		/* margin-right: 12px; */
		color: #606266;
		font-size: 15px;
	}

	.tanchuang_qitabox_button {
		width: 90px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 13px;
		color: #999;
		background: #eaeaea;
	}

	.tanchuang_button_box {
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-size: 15px;
		margin-bottom: 10px;
	}

	.quxiaobox {
		width: 48%;
		background: #fbe5e5;
		color: #e23234;
		padding: 10px 0;
		border-radius: 7px;
	}

	.quedingbox {
		width: 48%;
		background: #e23234;
		color: #fff;
		padding: 10px 0;
		border-radius: 7px;
	}
</style>
